<template>
	<view class="main">
	  <view class="title">
		<text>{{exhibition.exhibitionName}}</text>
	  </view>
	  <view class="img">
	    <!-- <image src="http://8.138.83.48:9000/library/home4.png" mode="heightFix"/> -->
		<image :src="bodyImg" mode="heightFix"/>
	  </view>
	  
	  <view class="info">
	    <view class="info-title">
	      <!-- <image class='background' src="/images/background.png" mode="widthFix"></image> -->
	      <text>展览信息</text>
	    </view>
	    <view class="info-item">
	        <text class="needweight">主办单位：\n</text>
	        <text space='ensp'>  {{exhibition.organizer}}\n</text>
	        <text class="needweight">展览时间：\n</text>
	        <text space='ensp'>  {{exhibition.openTime}}\n</text>
	        <text class="needweight">展览地点：\n</text>
	        <text space='ensp'>  {{exhibition.address}}\n</text>
	        <text class="needweight">门票信息：\n</text>
	        <text space='ensp'>  {{exhibition.cost === 0 ? '免费' : exhibition.cost}}\n</text>
	    </view>
	  </view>
	  <view class="introduction">
	    <view class="introduction-title">
	      <!-- <image class='background' src="/images/background.png" mode="widthFix"></image> -->
	      <text>展览简介</text>
	    </view>
	    <view class="introduction-item">
	        <text space='ensp'>  {{exhibition.details}}\n</text>
	    </view>
	  </view>
	  <view class="detail-list">
	    <view class="detail-title">
	      <!-- <image class='background' src="/images/background.png" mode="widthFix"></image> -->
	      <text>展览风采</text>
	    </view>
	    <view class="detail-item" v-for="(item, i) in detailImgList" :key="i">
	      <image :src="item" mode="heightFix"/>
	    </view>
	  </view>
	 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// detailImgList: [
				//       "http://8.138.83.48:9000/library/klDetailImg1.jpg",
				//       "http://8.138.83.48:9000/library/klDetailImg2.jpg", 
				//       "http://8.138.83.48:9000/library/klDetailImg3.jpg"
				//     ],
				bodyImg: '',
				detailImgList: [],
				exhibition: {
					exhibitionName: '',
					organizer: '',
					openTime: '',
					address: '',
					cost: 0,
					details: ''
				}
			};
		},
		onLoad(options) {
			this.getExhibitionInfoById(options.id)
		},
		methods: {
			async getExhibitionInfoById(id) {
				const {data: res} = await uni.$http.get('/exhibition/info/' + id)
				// console.log(res)
				
				if(res.msg !== 'success') return uni.$showMsg('数据加载失败')
				
				//处理照片映射
				this.bodyImg = res.exhibition.bodyPhoto
				this.detailImgList = res.exhibition.detailPhoto.split(',').map(x => x.toString())
				
				
				//给exhibition属性赋值
				this.exhibition = res.exhibition
				
			}
		}
	}
</script>

<style lang="scss">
.main {
  height: 1000px;
  // background-color: #e0e7c8;
}

.title {
  display: flex;
  justify-content: center;
}
.title text {
  font-size: 25px;
  font-weight: lighter;
  text-shadow: 5px 1px 6px rgba(0, 0, 0, 0.459);
}

.img {
  margin: 5px;
}

.background {
  width: 100px;
  height: 100px;
  position:fixed; 
  background-size:100% 100%;
  z-index: -1;
}

/* 展览信息 */
.info {
  margin: 5px;
}
.info-title {
  /* width: 20px; */
  height: 30px;
  font-size: 20px;
  font-weight: bold;
  /* background-image: "/images/background.png"; */
  /* background-color: #C00000; */
}
.info-title text {
  justify-content: center;
}
.needweight {
  font-weight: bold;
}

.introduction {
  margin: 5px;
  .introduction-title {
	  font-size: 20px;
	  font-weight: bold;
  }
}
.detail-list {
  margin: 5px;
  .detail-title {
	  font-size: 20px;
	  font-weight: bold;
  }
}
.detail-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  margin-top: 10px;
} 


</style>
